<template>
    <div class="common-layout">
        <el-container>

            <!-- 头顶部分 -->
            <el-header class="top">
                <el-icon style="display: block; margin: auto 0; margin-left: 3rem; color: var(--blueColor3);">
                    <ArrowLeft />
                </el-icon>
                <span style="margin-left: 0.2rem;  color: var(--blueColor3);">返回</span>
                <span style="color: #999;">|</span>
                <span style="#333">发布试卷</span>
            </el-header>

            <!-- 中间部分 -->
            <el-main>
                <div class="contain">
                    <span>发送班级</span>
                    <el-tree-select v-model="value" :data="data" multiple :render-after-expand="false" show-checkbox
                        style="margin-top: 1rem;font-size: 1rem; width: 100%;" size="large" placeholder="请选择班级"
                        @check="choice" />
                    <div style="margin-top: 2rem;">
                        <span>发布名称</span>
                        <el-input v-model="examName" placeholder="Please input"
                            style="height:3rem ; margin-top: 1rem;font-size: 1rem;" />
                    </div>
                    <div style="margin-top: 2rem;">
                        <span>发布类型</span>
                        <el-radio-group v-model="type" class="ml-4" style="margin-left: 2rem;">
                            <el-radio label="1" size="large">考试</el-radio>
                            <el-radio label="0" size="large">作业</el-radio>
                        </el-radio-group>

                    </div>
                    <div v-if="type == '0'" style="margin-top: 2rem;">
                        <span>考试时长(分钟)</span>
                        <el-select v-model="durtion" class="m-2" placeholder="请选择考试时长" size="large"
                            style="width:100% ; margin-top: 1rem;  height: 3rem;">
                            <el-option v-for="item in paperTime" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                    <div style="margin-top: 2rem;">
                        <span>截止时间</span>
                        <el-date-picker v-model="deadTime" type="datetime" placeholder="选择截止时间"
                            style="width:100% ; margin-top: 1rem;  height: 3rem;" />
                    </div>

                </div>
            </el-main>

            <!--    底下的部分 -->
            <el-footer class="buttom">
                <div>
                    <!-- //没有完成返回 -->
                    <el-button @click="" style="width: 6rem; " round>取消</el-button>
                    <el-button style="width: 6rem;" @click="toPublish" round>发布</el-button>
                </div>
            </el-footer>

        </el-container>
    </div>
</template>

<script>
import paper from '@/api/paper';
import { h } from 'vue'
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import {mapState} from 'vuex'
export default {
    name: 'TestOnlinePublishPaper',

    data() {
        return {
            examName: '期末考试',
            type: '0',
            paperTime: [{
                value: 30,
                label: 30
            },
            {
                value: 60,
                label: 60
            },
            {
                value: 90,
                label: 90
            },
            {
                value: 120,
                label: 120
            },

            ],
            durtion: 30,
            deadTime: '',
            data: [],
            teacherId: "2",
            value: [],
            classId: [],


        };
    },

    mounted() {
        //模拟老师id
        paper.getqueryClassAndCourseByTeacherID(this.teacherId).then((res) => {
            var list = []
            for (let i = 0; i < res.data.length; i++) {
                var children = [];
                for (let j = 0; j < res.data[i].classList.length; j++) {
                    var classObject = {
                        value: res.data[i].classList[j].className,
                        lable: res.data[i].classList[j].id,
                    }
                    children.push(classObject)
                }
                var course = {
                    value: res.data[i].courseName,
                    lable: res.data[i].id,
                    children: children
                }
                list.push(course)
            }

            this.data = list


        })

    },

    methods: {
        deleteClass(index) {
            this.classes.splice(index, 1)
        },
        choice(a, b) {
            var list = []
            for (let i = 0; i < b.checkedNodes.length; i++) {
                if (b.checkedNodes[i].children == '' || (typeof b.checkedNodes[i].children === 'undefined')) {
                    if (!list.includes(b.checkedNodes[i].lable)) {
                        list.push(b.checkedNodes[i].lable)
                    }
                }


            }
            this.classId = list
        },
        toPublish() {
            var flag = true
            if (this.classId.length == 0) {
                flag = false
                ElMessage({
                    message: h('p', null, [
                        h('span', null, '发送的班级不能为空!'),
                        h('i', { style: 'color: teal' }, ''),
                    ]),
                })
            }
            if (this.examName == '' || (typeof this.examName === 'undefined')) {
                flag = false
                ElMessage({
                    message: h('p', null, [
                        h('span', null, '发布名称不能为空!'),
                        h('i', { style: 'color: teal' }, ''),
                    ]),
                })
            }
            if (this.deadTime == '' || (typeof this.deadTime === 'undefined')) {
                flag = false
                ElMessage({
                    message: h('p', null, [
                        h('span', null, '请输入截止时间!'),
                        h('i', { style: 'color: teal' }, ''),
                    ]),
                })
            }
            var now = new Date();
            if(now>this.deadTime){
                flag = false
                ElMessage({
                    message: h('p', null, [
                        h('span', null, '截止时间不能小于当前时间!'),
                        h('i', { style: 'color: teal' }, ''),
                    ]),
                })
            }
            if (flag == true) {

                
                paper.batchAddClassPaper({
                    classId: this.classId,
                    paperId: this.currentPaperId,
                    publishName: this.examName,
                    deadTime:this.dateTimeToString(this.deadTime) ,
                    durtion: this.durtion,
                    type: this.type
                }).then((res) => {
                    ElMessageBox({
                        title: '发布结果',
                        message: h('p', null, [
                            h('span', null, ''),
                            h('i', { style: 'color: teal' }, res.msg),
                        ]),
                    })
                })
            }

        },
        dateTimeToString(date) {
            var y = date.getFullYear();
            var M = date.getMonth() + 1;
            var d = date.getDate();
            var H = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            return y + '-' + (M < 10 ? ('0' + M) : M) + '-' + (d < 10 ? ('0' + d) : d) + " " + (H < 10 ? ('0' + H) : H) + ":" + (m < 10 ? ('0' + m) : m) + ":" + (s < 10 ? ('0' + s) : s);
        }

    },
    computed:{
        //从vueX获取数据
        ...mapState(['currentPaperId'])
    },
};

</script>

<style lang="css" scoped>
.top {
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    font-size: 1rem;
    display: flex;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07);
}

.top span {

    margin-left: 1rem;
}

.buttom {
    width: 100%;
    height: 4rem;
    border-top: 1px solid #ddd;
    bottom: 0rem;
    line-height: 4rem;
}

.buttom div {
    width: 13rem;
    margin: 0 auto;
}

button {
    background-color: var(--blueColor2);
    color: white;
}

.mindle {
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 3rem;
    height: 100%;
}

.contain {
    margin-top: 7rem;
    width: 70%;
    margin: 0 auto;
    font-size: 1.1rem;
}

.chioceClass {
    width: 100%;
    height: 3rem;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0.6rem;
    color: var(--blueColor3);
    margin-top: 1rem;
    font-size: 1rem;
}

.selectedClass {
    padding: 0.3rem;
    background-color: var(--blueColor4);
    color: #666;
    margin-right: 0.5rem;
    border-radius: 4rem
}

.choiceclass {
    padding: 1rem;
    width: 45%;
    border-right: 1px var(--el-border-color) var(--el-border-style);
    height: 20rem;
}

.tree {
    width: 50%;
    padding: 1rem;
    height: 20rem;
}

.dialog_contain {
    display: flex;
}
</style>